<template>
  <div class="container-login">
    <!-- 导航栏 -->
    <van-nav-bar title="登录" />
    <!-- 表单部分 -->
    <van-form validate-first="" @failed="onFailed()" @submit="onSubmit()">
    <van-cell-group>
    <van-field
      :error-message="mobile_errmsg"
      :rules="[{ pattern: /\d{11}/, message: '请输入正确的手机号' }]"
      v-model.trim="mobile"
      required
      label="手机号"
      placeholder="请输入手机号" />
      <van-field
      :rules="[{ pattern: /\d{6}/, message: '请输入正确的验证码' }]"
      :error-message="code_errmsg"
      v-model.trim="code"
      required label="密码"
      placeholder="请输入密码号" />
    </van-cell-group>
    <!-- 登录按钮 -->
    <div class="btn-wrap">
      <van-button @click="jump()" type="info" class="btn">登陆</van-button>
    </div>
    <p>当前是否登录：{{$store.state.tokenInfo.token?"登录了":"没有登录"}}</p>
    </van-form>
  </div>
</template>
<script>
import { login, getInfo } from '@/api/user.js'
export default {
  name: 'page-login',
  data () {
    return {
      mobile: 13912345678,
      code: 246810,
      mobile_errmsg: '',
      code_errmsg: ''
    }
  },
  methods: {
    // 失败的时候要执行的函数
    onFailed (errorInfo) {
      console.log(errorInfo)
    },
    // 成功的时候执行的函数
    onSubmit () {
      console.log(2222)
    },
    //   设置一方法  检查手机号和密码
    check () {
      // eslint-disable-next-line no-sequences
      this.mobile_errmsg = this.mobile === '' ? '请输入手机号' : ''
      this.code_errmsg = this.code === '' ? '请输入密码' : ''
      if (this.mobile === '') return false
      if (this.code === '') return false
      return true
    },
    async jump () {
      // 点击按钮的时候  验证check()方法
      if (!this.check()) return
      // 因为不能频繁触发点击按钮事件 发送请求 所以设置loading方法
      this.$toast.loading({
        duration: 0, // 持续展示 toast,永远不会关闭
        mask: true, // 整体添加一个遮罩
        message: '加载中...'
      })
      // 发送请求
      try {
        // eslint-disable-next-line no-unused-vars
        const result = await login(this.mobile, this.code)
        console.log(result)
        this.$toast.success('登录成功')
        // 将返回的token值传给vuex里面的state.tokenInfo对象
        this.$store.commit('mSetTokenInfo', result.data.data)
        // 2.再发请求获取个人信息
        const res = await getInfo()
        console.log(res)
        const user = res.data.data
        // 保存到vuex
        this.$store.commit('mSetUserInfo', {
          id: user.id,
          name: user.name,
          photo: user.photo
        })
        // 跳转页面
        const backto = this.$route.query.backto || '/'
        this.$router.push(backto)
      } catch (e) {
        console.log(e)
        this.$toast.fail('登陆失败')
      }
    }
  }
}
</script>
 <style lang='less' scoped>
 .container-login{
     .btn-wrap{
         padding: 20px;
         .btn{
             width: 100%;
             background-color: #6db4fd;
             color: #fff;
         }
     }
 }
</style>
